<template>
  <div class="title">
    <div class="content">
      <div @mouseleave="showProvinces=false" @mouseenter="showProvinces=true" class="address">
        <img src="../../../../assets/address.svg">
        <span class="title-span">{{provinceName}}</span>
        <drop-down
          v-show="showProvinces"
          class="drop-down left-slide"
          :manyCardData="province"
          :count="5"
          @clickUrl="clickCity"
          :textWidth="50"
          :paddingWidth="15"
          showBackground
        ></drop-down>
      </div>
      <ul>
        <li>你好，请登录&nbsp;<a href="#">免费注册</a></li>
        <li class="spacer"></li>
        <template v-for="(info,index) in titleInfo">
          <li @mouseleave="cancelDropDown" @mouseenter="openDropDown(index)">
            <span class="title-span">{{info.label}}</span>
            <drop-down
              v-show="info.detail && index === showDropDownIndex"
              class="drop-down right-slide"
              :direction="info.direction"
              :manyCardData="info.detail"
              @clickUrl="openUrl"
              :count="info.count"
            ></drop-down>
            <img src="../../../../assets/point.svg" v-if="info.detail">
          </li>
          <li class="spacer" v-if="index!==titleInfo.length-1"></li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
  import {TITLE_INFO, PROVINCE} from '@util/constant'
  import dropDown from './dropDown'

  export default {
    name: "index",
    model: {},
    components: {
      dropDown
    },
    props: {},
    data() {
      return {
        titleInfo: TITLE_INFO,
        showDropDownIndex: -1,
        showProvinces: false,
        province: PROVINCE,
        provinceName: '未选择'
      }
    },
    computed: {},
    beforeCreate: function () {

    },
    created: function () {

    },
    beforeMount: function () {

    },
    mounted: function () {

    },
    updated: function () {

    },
    activated: function () {

    },
    deactivated: function () {

    },
    beforeDestroy: function () {
      console.error('beforeDestroy')
    },
    destroyed: function () {
      console.error('destroyed')
    },
    methods: {
      cancelDropDown() {
        this.showDropDownIndex = -1
      },
      openDropDown(index) {
        this.showDropDownIndex = index
      },
      clickCity(url) {
        this.provinceName = url
      },
      openUrl(url) {
        this.$router.push(url)
      }
    }
  }
</script>

<style scoped lang="scss">
  .title {
    height: 30px;
    background-color: #e3e4e5;
    color: #999;
    line-height: 28px;
    font-weight: 300;

    .content {
      margin: 0 125px;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 8px;
      justify-content: space-between;

      > div:first-child {
        position: relative;
        display: flex;
        align-items: center;

        img {
          height: 16px;
          width: 16px;
          margin-right: 5px;
        }
      }

      /*>div:nth-child(2){*/
      /*  !*float: right;*!*/
      /*  margin-left: 100px;*/
      /*  a{*/
      /*    color: #f10215;*/
      /*    text-decoration: none;*/
      /*  }*/
      /*}*/

      ul {
        list-style: none;
        display: flex;
        /*width: 100%;*/
        /*float: right;*/

        > li:first-child {
          a {
            color: #f10215;
            text-decoration: none;
          }
        }

        li {
          padding: 0 12px;
          position: relative;
          /*display: inline;*/
          /*float: right;*/

          img {
            height: 8px;
            width: 8px;
          }
        }

        .spacer {
          width: 1px;
          background-color: #999;
          height: 10px;
          margin: 10px 0;
          padding: 0;
        }
      }
    }

    .drop-down {
      position: absolute;
      top: 26px;
    }

    .right-slide {
      right: 0;
    }

    .left-slide {
      left: 0;
    }

    a {
      text-decoration: none;
      color: #999;
    }

    &-span:hover{
      cursor: pointer;
    }
  }
</style>
